<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
            <el-row :gutter="10">
                <template v-for="(item,key,index) of editForm" :key="index">
                    <el-col :span="12">
                        <el-form-item :label="item.label" :prop="item.prop">
                            <el-input v-if="item.elmentuiType == 'text' || !item.elmentuiType " v-model="ruleForm[item.prop]" clearable :placeholder="item.placeholder" />
                            <el-input-number
                                v-if="item.elmentuiType == 'number'"
                                v-model="ruleForm[item.prop]"
                                :min="item.min"
                                :max="item.max"
                                controls-position="right"
                                :placeholder="item.placeholder"
                            />
                            <el-date-picker
                                v-if="item.elmentuiType == 'date'"
                                v-model="ruleForm[item.prop]"
                                :type="item.dataType"
                                :placeholder="item.placeholder"
                            />

                            <!-- <el-select v-if="item.elmentuiType == 'select'" v-model="ruleForm[item.prop]" filterable clearable :placeholder="item.placeholder">
                                <el-option
                                    v-for="el in item.option()"
                                    :key="el.value"
                                    :label="el.label"
                                    :value="el.value"
                                />
                            </el-select> -->
                            <selectTreeVue v-if="item.elmentuiType == 'select'" v-model:modelValue="ruleForm[item.prop]" :options="item.option()" filterable clearable :placeholder="item.placeholder" @treeSelect="handleSelect" />
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>
        <div class="pull-center mtop20">
            <el-button @click="close">关闭</el-button>
            <el-button type="primary" @click="submitForm('ruleFormRef')">保存</el-button>
        </div>
    </div>
</template>

<script setup name="SystemTemplateProjectDialogAddTemplate">
import { computed,getCurrentInstance,ref,onMounted  } from 'vue'
import selectTreeVue from '../../TreeSelect/index.vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
    temData: {
        type: Object,
        default: () => {}
    },
    close: {
        type: Function,
        default: () => {
            return function() {
            }
        }
    },
    editForm: {
        type: Object,
        default: () => {}
    },
    editFormline: {
        type: Object,
        default: () => {}
    },
    submit: {
        type: Function,
        default: () => {
            return function() {
            }
        }
    }

})
const ruleForm = ref({})

const rules = computed(() => {
    let rule = {}
    props.editForm.filter(row => {
        return row?.rules && row?.rules.length > 0
    }).map(row => {
        let obj = {}
        obj[row.prop] = row.rules
        rule = { ...rule, ...obj }
    })
    return rule
})
onMounted(() => {
    if (props.temData) {
        ruleForm.value = Object.assign(ruleForm.value, props.temData)
    }
})

function submitForm(formName) {
    proxy.$refs[formName].validate(valid => {
        if (valid) {
            props.submit(ruleForm.value)
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

function handleSelect(data) {
    console.log(data)
}
</script>

<style lang="scss" scoped>
.pull-center{
    text-align: center;
}
</style>
